<template>
  <page class="news">
    <page-header>
      <x-header :left-options="{showBack: false}">消息</x-header>
    </page-header>

    <page-content :scroll="false">
      <ul class="x-list">
        <!-- 公告消息 -->
        <router-link tag="li" :to="{path:'/notify'}" class="x-item">
          <div class="thumb">
            <img src="../../assets/notice.png">
            <div class="dian" v-if="notify.count > 0"></div>
          </div>
          <div class="content">
            <p class="systext">公告消息</p>
            <i class="material-icons right">chevron_right</i>
          </div>
        </router-link>
        <!-- 我的消息 -->
        <router-link tag="li" :to="{path:'/message'}" class="x-item">
          <div class="thumb">
            <img src="../../assets/news.png">
            <div class="dian" v-if="messages.count > 0"></div>
          </div>
          <div class="content">
            <p class="systext">消息通知</p>
            <i class="material-icons right">chevron_right</i>
          </div>
        </router-link>
      </ul>
    </page-content>
    <page-footer>
      <x-footer></x-footer>
    </page-footer>
  </page>
</template>

<script>
import { XHeader } from 'vux'
import { mapGetters } from 'vuex'
import { oaNotify, msgDetail } from '@service'
import XFooter from '@components/common/Footer'

export default {
  name: 'News',
  components: {
    XHeader,
    XFooter
  },
  computed: {
    ...mapGetters({
      userInfo: 'user/info',
      token: 'user/token'
    })
  },
  data () {
    return {
      notify: {
        count: 0
      },
      messages: {
        count: 0
      },
      page: {
        pageNo: 1,
        pageSize: 10
      }
    }
  },
  methods: {
    async loadData () {
      try {
        let token = this.token
        let userId = this.userInfo.id
        let page = this.page
        let notifyData = await oaNotify.list({ userId, token, ...page })
        let msgData = await msgDetail.list({ userId, token, ...page })
        this.notify.count = notifyData.count
        this.messages.count = msgData.count
        console.log(this.messages)
        console.log(notifyData, msgData)
      } catch (error) {
        console.log(error)
      }
    }
  },
  created () {
    this.loadData()
  }
}
</script>

<style lang="scss" scoped>
.news {
  height: 100%;
  width: 100%;

  .x-list {
    display: flex;
    flex-flow: column;
    .x-item {
      position: relative;
      display: flex;
      padding: 0.8rem;
      background: #fff;
      &:after {
        content: '';
        position: absolute;
        left: 0.8rem;
        bottom: 0;
        right: 0.8rem;
        height: 0.5px;
        background:#ccc;
      }
      &:last-child:after {
        display: none;
      }

      .thumb {
        position: relative;
        width: 50px;
        height: 50px;
        margin-right: 0.5rem;
        img {
          width: 100%;
          height: 100%;
        }
        .dian {
          position: absolute;
          top: -0.3rem;
          right: -0.3rem;
            width: 0.6rem;
            height: 0.6rem;
            background: red;
            border-radius: 50%;
        }
      }
      .content {
        flex: 1;
        display: flex;
        flex-flow: row;
        align-items: center;
        justify-content: space-between;
      }
    }
  }

  .right {
    color: #c7c7cc;
  }
}
</style>
